<template>
  <div class="m-istyle">
    <dl @mouseover="over" :class="nav.class">
      <dt>{{ nav.title }}</dt>
      <dd
        v-for="(item, index) in nav.list"
        :key="index"
        :class="{ active: kind == item.tab }"
        :data-type="item.tab"
      >
        {{ item.text }}
      </dd>
    </dl>
    <ul class="ibody">
      <li v-for="(item, index) in resultsData[kind]" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="never">
          <router-link :to="{ name: 'goods', params: { name: item.title } }">
            <img :src="item.image" class="image" />
          </router-link>
          <div class="cbody">
            <div class="title" :title="item.title">{{ item.title }}</div>
            <div class="sub-title" :title="item.sub_title">
              {{ item.sub_title }}
            </div>
            <div class="price-info">
              <span class="current-price-wrapper">
                <span class="price-symbol numfont">¥</span>
                <span class="current-price numfont">{{ item.price }}</span>
              </span>
              <span class="sold bottom-right-info">{{ item.address }}</span>
            </div>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>
<script>
import api from '@/api/index.js'
export default {
  data() {
    return {
      kind: "all",
      resultsData: {
        all: [
          {
            image:
              "https://p1.meituan.net/wedding/8d26f93de654d433b17774e60a1fc5bd1028431.jpg@240w_180h_1e_1c_1l|watermark=1&&r=2&p=9&x=2&y=2&relative=1&o=20|460w_260h_1e_1c",
            title: "木北造型",
            address: "崇文门新世界店",
            subTitle: "木北造型（崇文门新世界店）",
            price: 398,
          },
        ],
        food: [
          {
            image:
              "https://p1.meituan.net/wedding/8d26f93de654d433b17774e60a1fc5bd1028431.jpg@240w_180h_1e_1c_1l|watermark=1&&r=2&p=9&x=2&y=2&relative=1&o=20|460w_260h_1e_1c",
            title: "COSTA COFFEE（东方新天地店）",
            address: "东方新天地",
            subTitle: "玫瑰黑巧茶拿铁1份",
            price: 11,
          },
        ],
        spa: [
          {
            image:
              "https://p1.meituan.net/wedding/8d26f93de654d433b17774e60a1fc5bd1028431.jpg@240w_180h_1e_1c_1l|watermark=1&&r=2&p=9&x=2&y=2&relative=1&o=20|460w_260h_1e_1c",
            title: "木北造型",
            address: "崇文门新世界店",
            subTitle: "木北造型（崇文门新世界店）",
            price: 398,
          },
        ],
      },
    };
  },
  props: ["nav"],
    created() {
      api.resultsByKeywords().then((res) => {
        // console.log(res.data.data);
        this.resultsData = res.data.data;
      });
    },
  methods: {
    over(e) {
      let dom = e.target;
      let tagName = dom.tagName.toLowerCase();
      if (tagName != "dd") {
        return false;
      }
      this.kind = dom.getAttribute("data-type");
      // 动态获取数据  ajax请求
    },
  },
};
</script>
<style lang="scss">
@import "@/assets/css/index/artistic.scss";
</style>

